<template>
	<view class="class-demo" >
		<view class="class" >
			<p v-text="className"></p>
			<view class="btn" @click="toEditClass">
				<text>编辑班级</text>
			</view>
		</view>
		
		<view class="studentList" v-for="item in studentList">
			<view @click="toStudentInfo(item.id)">
				<view ><image style="width: 100%;" :src="item.studentAvatar" class="img" ></image></view>
				<view><text >{{item.studentName}}</text></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				studentList:[],
				className:null,
				classId:null,
			}
		},
		onLoad(e) {
			this.classId = e.classId
			this.className=e.className
			this.getStudentList()
			
			
			
			
		},
		
		methods: {
			//跳转学生照片
			toStudentInfo(id){
				uni.$common.navigateTo("/subpkg/teacher/studentInfo/studentInfo?studentId="+id)
			},
			
			//跳转编辑班级
			toEditClass(){
			
				uni.$common.navigateTo("/subpkg/teacher/editClass/editClass?classId="+this.classId+"&className="+this.className)
			},
			//获取学生列表
			getStudentList() {
			
				this.$api.appStudentFindByClassId(this.classId).then(data => {
					this.studentList = data;
				}); 
			},
			
		}
	}
</script>

<style>
.class-demo{
	width: 90%;
	height: 100%;
	margin: 20rpx;
}
.class{
	/* background-color: white; */
	border-bottom: 1rpx solid #b6b6b6;
	
	width: 100%;
	height: 90rpx;
}
.class p{
	line-height: 50rpx;
}
.studentList{
	width: 25%;
	height: 60rpx;
	margin-top: 30rpx;
	margin-right: 30rpx;
	margin-left: 25rpx;
	text-align: center;
	display: inline-block;
}
.img{
	width: 100%;
	height: 165rpx;
	border-radius: 50%;
}
.btn{
	width: 25%;
	height: 60rpx;
	position: relative;
	top: -50rpx;
	left: 75%;
	border-radius: 30rpx;
	border: 1rpx solid #b6b6b6;
	text-align: center;
}
.btn text{
	font-size: 1rem;
	color: #adadad;
}
</style>
